<template>
  <div class="box">
    <div class="bb">
      <div class="gk">
        <div>概况</div>
        <div>
          <i class="el-icon-refresh"></i>
        </div>
      </div>
      <div class="box1_bottom">
        <div class="box1_bottom_1">
          <div class=" kc">
            即时库存(元)
          </div>
          <div class="fontz">
            98,600.00
          </div>
        </div>

        <div class="box1_bottom_1">
          <div class=" kc">
            客户欠款(元)
          </div>
          <div class="fontz">
            0.00
          </div>
        </div>
      </div>
    </div>
    <div class="bb2">
      <div class="kh">
        <div class="gk">
          <div>客户</div>
          <div>
            <i class="el-icon-refresh"></i>
          </div>
        </div>
        <div class="box1_bottom">
          <div class="box1_bottom_1">
            <div class=" kc">
              今日+
            </div>
            <div class="fontz">
              0
            </div>
          </div>

          <div class="box1_bottom_1">
            <div class=" kc">
              本周+
            </div>
            <div class="fontz">
              8
            </div>
          </div>
          <div class="box1_bottom_1">
            <div class=" kc">
              本月+
            </div>
            <div class="fontz">
              10
            </div>
          </div>
          <div class="box1_bottom_1">
            <div class=" kc">
              客户数
            </div>
            <div class="fontz">
              11
            </div>
          </div>
        </div>
      </div>
      <div class="gys">
        <div class="gk">
          <div>客户</div>
          <div>
            <i class="el-icon-refresh"></i>
          </div>
        </div>
        <div class="box1_bottom">
          <div class="box1_bottom_1">
            <div class=" kc">
              今日+
            </div>
            <div class="fontz">
              0
            </div>
          </div>

          <div class="box1_bottom_1">
            <div class=" kc">
              本周+
            </div>
            <div class="fontz">
              8
            </div>
          </div>
          <div class="box1_bottom_1">
            <div class=" kc">
              本月+
            </div>
            <div class="fontz">
              10
            </div>
          </div>
          <div class="box1_bottom_1">
            <div class="kc">
              供应商数
            </div>
            <div class="fontz">
              11
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="bb3" style="height: 900px;">
      <div class="gk">
        <div>销售</div>
        <div>
          <i class="el-icon-refresh"></i>
        </div>
      </div>
      <div class="flexbox">
        <div class="box1_bottom">
          <div>订单</div>
          <div class="dd">
            <div class="bs">
              <p class="hui">今日笔数</p>
              <p class="ling">0</p>
              <p class="zhou">本周：0.00</p>
              <p>本月：0.00</p>
            </div>
            <div class="bs">
              <p class="hui">今日金额</p>
              <p class="ling">0.00</p>
              <p class="zhou">本周：0.00</p>
              <p>本月：0.00</p>
            </div>
          </div>

        </div>
        <div class="box1_bottom">
          <div>订单</div>
          <div class="dd">
            <div class="bs">
              <p class="hui">今日笔数</p>
              <p class="ling">0</p>
              <p class="zhou">本周：0.00</p>
              <p>本月：0.00</p>
            </div>
            <div class="bs">
              <p class="hui">今日金额</p>
              <p class="ling">0.00</p>
              <p class="zhou">本周：0.00</p>
              <p>本月：0.00</p>
            </div>
          </div>

        </div>
      </div>

      <div class="flexbox">
        <div class="box1_bottom">
          <div>订单</div>
          <div class="dd">
            <div class="bs">
              <p class="hui">今日笔数</p>
              <p class="ling">0</p>
              <p class="zhou">本周：0.00</p>
              <p>本月：0.00</p>
            </div>
            <div class="bs">
              <p class="hui">今日金额</p>
              <p class="ling">0.00</p>
              <p class="zhou">本周：0.00</p>
              <p>本月：0.00</p>
            </div>
          </div>

        </div>
        <div class="box1_bottom">
          <div>订单</div>
          <div class="dd">
            <div class="bs">
              <p class="hui">今日笔数</p>
              <p class="ling">0</p>
              <p class="zhou">本周：0.00</p>
              <p>本月：0.00</p>
            </div>
            <div class="bs">
              <p class="hui">今日金额</p>
              <p class="ling">0.00</p>
              <p class="zhou">本周：0.00</p>
              <p>本月：0.00</p>
            </div>
          </div>

        </div>
      </div>


      <div class="gk">
        <div>销售</div>
        <div>
          <i class="el-icon-refresh"></i>
        </div>
      </div>
      <div class="flexbox">
        <div class="box1_bottom">
          <div>订单</div>
          <div class="dd">
            <div class="bs">
              <p class="hui">今日笔数</p>
              <p class="ling">0</p>
              <p class="zhou">本周：0.00</p>
              <p>本月：0.00</p>
            </div>
            <div class="bs">
              <p class="hui">今日金额</p>
              <p class="ling">0.00</p>
              <p class="zhou">本周：0.00</p>
              <p>本月：0.00</p>
            </div>
          </div>

        </div>
        <div class="box1_bottom">
          <div>订单</div>
          <div class="dd">
            <div class="bs">
              <p class="hui">今日笔数</p>
              <p class="ling">0</p>
              <p class="zhou">本周：0.00</p>
              <p>本月：0.00</p>
            </div>
            <div class="bs">
              <p class="hui">今日金额</p>
              <p class="ling">0.00</p>
              <p class="zhou">本周：0.00</p>
              <p>本月：0.00</p>
            </div>
          </div>

        </div>
      </div>

      <div class="flexbox">
        <div class="box1_bottom">
          <div>订单</div>
          <div class="dd">
            <div class="bs">
              <p class="hui">今日笔数</p>
              <p class="ling">0</p>
              <p class="zhou">本周：0.00</p>
              <p>本月：0.00</p>
            </div>
            <div class="bs">
              <p class="hui">今日金额</p>
              <p class="ling">0.00</p>
              <p class="zhou">本周：0.00</p>
              <p>本月：0.00</p>
            </div>
          </div>

        </div>
        <div class="box1_bottom">
          <div>订单</div>
          <div class="dd">
            <div class="bs">
              <p class="hui">今日笔数</p>
              <p class="ling">0</p>
              <p class="zhou">本周：0.00</p>
              <p>本月：0.00</p>
            </div>
            <div class="bs">
              <p class="hui">今日金额</p>
              <p class="ling">0.00</p>
              <p class="zhou">本周：0.00</p>
              <p>本月：0.00</p>
            </div>
          </div>

        </div>
      </div>
    </div>
    <div class="bb4" style="height: 900px;">
      <div class="bb4left">
        <div class="gk">
          <div>概况</div>
          <div>
            <i class="el-icon-refresh"></i>
          </div>
        </div>
        <div class="kongbai"></div>
        <div class="gk">
          <div>概况</div>
          <div>
            <i class="el-icon-refresh"></i>
          </div>
        </div>
        <div class="kongbai"></div>

        <div class="gk">
          <div>概况</div>
          <div>
            <i class="el-icon-refresh"></i>
          </div>
        </div>
        <div class="kongbai"></div>
        <div class="gk">
          <div>概况</div>
          <div>
            <i class="el-icon-refresh"></i>
          </div>
        </div>
        <div id="echarts">

        </div>
      </div>
      <div class="bb4right">
        <div class="gk">
          <div>概况</div>
          <div>
            <i class="el-icon-refresh"></i>
          </div>
        </div>
        <div class="bzz">
          <div class="bzz_1">
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            &nbsp;
          </div>
          <div>
            编制中
          </div>
          <div>
            待核批
          </div>
          <div>
            执行中
          </div>
        </div>
        <div class="bzz2" v-for="(item,index) in 10">
          <div class="bzz_1">
            销售报价
          </div>
          <div>
            0
          </div>
          <div>
            0
          </div>
          <div>
            0
          </div>
        </div>

      </div>
    </div>
  </div>

</template>

<script>
import { mapGetters } from 'vuex'
import * as echarts from 'echarts';
export default {
  name: 'Dashboard',
  data() {
    return{
      option: {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
            axisTick: {
              alignWithLabel: true
            }
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            name: 'Direct',
            type: 'bar',
            barWidth: '60%',
            data: [10, 52, 200, 334, 390, 330, 220]
          }
        ]
      }
    }
    
  },
  computed: {
    ...mapGetters([
      'name'
    ])
  },
  mounted(){
    this.getEcharts()
  },
  methods: {
    getEcharts(){
      var chartDom = document.getElementById('echarts');
      var myChart = echarts.init(chartDom);
      myChart.setOption(this.option)
    }
  }
}
</script>

<style lang="less" scoped>
.box {
  width: 99%;
  // padding: 15px;
  margin: 0px auto;
  border-radius: 3px;
  display: grid;
  font-size: 16px;
  margin: 4px 4px 0px 6px;
  /* grid-template-columns: repeat(4,1fr); */
  grid-template-columns: repeat(auto-fill, minmax(510px, 1fr));
  /*响应式布局*/
  gap: 6px;
}

.bb {
  height: 170px;
  border-radius: 3px;
  background-color: white;
  .gk {
      height: 35px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 10px 25px;
      border-bottom: 1px solid #e8e8e8;
  
    }
  
    .box1_bottom {
      display: flex;
      justify-content: space-evenly;
      .box1_bottom_1 {
        width: 45%;
        text-align: center;
        margin-top: 20px;
  
        div {
          margin: 5px 0;
        }
  
        .kc {
          font-size: 14px;
          color: #9e8c9e;
        }
  
        .fontz {
          font-size: 23px;
          margin-top: 15px;
        }
      }
    }
}

.bb2 {
  height: 170px;
  border-radius: 3px;
  background-color: #f0f2f5;
  display: flex;
  justify-content: space-between;

  .kh {
    width: 49.5%;
    background-color: white;

    .gk {
      height: 35px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 10px 25px;
      border-bottom: 1px solid #e8e8e8;

    }

    .box1_bottom {
      display: flex;
      justify-content: center;
      .box1_bottom_1 {
        width: 45%;
        text-align: center;
        margin-top: 20px;
        div {
          margin: 5px 0;
        }

        .kc {
          // width: 56px;
          font-size: 14px;
          color: #9e8c9e;
        }

        .fontz {
          font-size: 23px;
          margin-top: 15px;
        }
      }
    }
  }

  .gys {
    width: 49.5%;
    background-color: white;
    .gk {
      height: 35px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 10px 25px;
      border-bottom: 1px solid #e8e8e8;
    }
    .box1_bottom {
      display: flex;
      justify-content: center;
      .box1_bottom_1 {
        width: 45%;
        text-align: center;
        margin-top: 20px;

        div {
          margin: 5px 0;
        }

        .kc {
          // width: 56px;
          font-size: 14px;
          color: #9e8c9e;
        }

        .fontz {
          font-size: 23px;
          margin-top: 15px;
        }
      }
    }
  }
}
.bb3{
  height: 170px;
  border-radius: 3px;
  background-color: white;
  
  font-size: 14px;
  .gk {
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 25px;
    border-bottom: 1px solid #e8e8e8;

  }
  .flexbox{
    display: flex;
  }
  .box1_bottom{
    width: 49.5%;
    padding: 15px;
    height: 192px;
    margin: 1px;
    box-sizing: border-box;
    background-color: white;
    box-shadow: 1px 0 0 0 #e8e8e8, 0 1px 0 0 #e8e8e8, 1px 1px 0 0 #e8e8e8, inset 1px 0 0 0 #e8e8e8, inset 0 1px 0 0 #e8e8e8;
    .dd{
      width: 88%;
      display: flex;
      justify-content: space-between;;
      .bs {
          padding: 10px;
          .ling{
            margin: 15px 0;
            font-size: 24px;
          }
          .zhou{
            margin: 5px 0;
          }
          .hui{
            color: #8c8c8c;
          }
        }
    }
    
  }
}
.bb4 {
  height: 170px;
  border-radius: 3px;
  background-color: #f0f2f5;
  display: flex;
  justify-content: space-between;
  
  .bb4left{
    width: 49.5%;
  }
  .bb4right{
    width: 49.5%;
  }
  .gk {
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 25px;
    border-bottom: 1px solid #e8e8e8;
    background-color: white;
  }
  .kongbai{
    padding: 10px 25px;
    margin-bottom: 10px;
    background-color: white;
  }
  #echarts{
    height: 161px;
    padding: 0px 25px;
    background-color: white;
  }
  .bzz{
    display: flex;
    justify-content: space-around;
    border-bottom: 1px solid #e8e8e8;
    padding: 15px 0px;
  }
  .bzz2{
    display: flex;
    justify-content: space-around;
    padding: 15px 0px;
    background-color: white;
    border-bottom: 1px solid #e8e8e8;
  }
}

</style>
